<template>
  <td :width="width" ref="grid-td-ref" class="grid-td">
    <span class="grid-span">{{show}}</span>
  </td>
</template>

<script>
export default {
  name: "GridColumnComponent",
  data(){
    return{
      show:""
    }
  },
  props:{
    indexName:String,
    columnName:String,
    width:String,
    dataRender:Function,
    groupCode:String
  },
  mounted() {
    this.$refs["grid-td-ref"].style.minWidth = this.width;
    let rowData = this.$parent.$props["showData"];
    if(undefined!==rowData) {
      let showData = rowData[this.indexName];
      if (undefined !== showData) {
        if (undefined !== this.dataRender) {
          // 如果有Render函数，则按indexName获取值后，执行Render函数，Render函数入参（列字段，行数据，列字段名）
          this.show = this.dataRender.call(this, showData, rowData, this.indexName);
        } else {
          // 如果没有Render函数，则直接按Key赋值
          this.show = showData;
        }
      }
    }

  }
}
</script>
<style scoped>
.grid-td{
  border-left: 1px solid #cccccc;
}
.grid-span{
  margin-left: 4px;
  margin-right: 4px;
}
.grid-td:hover{
  background: #cfc;
}
</style>